<template>
    <div class="box_problem">
        <MoodalTitle :title="'重复问题分析'">
            <!-- <div style="display: flex;">
                <div :class="butActive == 1 ? 'moodal_but' : 'moodal_but opacity'" style="margin-right: 2rem;"
                    @click="but(1)">事件</div>
                <div :class="butActive == 2 ? 'moda_but' : 'moodal_but opacity'" @click="but(2)">部件</div>
            </div> -->
        </MoodalTitle>
        <div id="Pie" class="Pie_lc">

        </div>
    </div>
</template>

<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import { ZongHeZhiFaDB } from '@/api/zhangzi/index'
export default {
    components: {
        MoodalTitle
    },
    data() {
        return {
            butActive: 1,
            LisData : [],
            echartData:[{
                name:'',
                value:null
            }]
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        but(value) {
            this.butActive = value
        },
        functionPie(LisData) {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.querySelector('#Pie'))
            let title = '地点';
            let color = ['#00D6FB', '#765deb', '#3862d8', '#6a89E2', '#219CF9', '#6efbbf',];
            let echartData = LisData;
            let option = {
                color: color,
                tooltip: {
                    trigger: 'item'
                },
                // 标题
                title: [{
                    text: '{name|' + title + '}',
                    top: 'center',
                    left: 'center',
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 15,
                                fontWeight: 'normal',
                                color: '#fff',
                                padding: [10, 0]
                            },
                            // val: {
                            //     fontSize: 32,
                            //     fontWeight: 'bolder',
                            //     color: '#000',
                            // }
                        }
                    }
                },
                // 副标题
                {
                    text: '单位：个',
                    top: 20,
                    left: 20,
                    textStyle: {
                        fontSize: 14,
                        color: '#fff',
                        fontWeight: 400
                    },
                    show: false
                }],
                // 饼图
                series: [{
                    type: 'pie',
                    roseType: 'radius',
                    radius: ['25%', '65%'],
                    center: ['50%', '50%'],
                    data: echartData,
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            // borderColor: bgColor,
                            // borderWidth: 2
                        }
                    },
                    // 控制线的长短
                    labelLine: {
                        normal: {
                            length: 10,
                            length2: 15,
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    label: {
                        normal: {
                            formatter: params => {
                                return (
                                    params.name 
                                );
                            },
                            rich: {
                                name: {
                                    fontSize: 18,
                                    padding: [0, 0, 0, 10],
                                    color: '#fff'
                                },
                                value: {
                                    fontSize: 14,
                                    fontWeight: 'bolder',
                                    padding: [10, 0, 0, 20],
                                    // color: 'inherit'
                                    color: '#fff'
                                }
                            }
                        }
                    },
                }]
            };
            // // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        getList() {
            ZongHeZhiFaDB.getDupAnalysis().then(res => {
                if (res.code == 200) {
                    res.data.forEach(item => {
                       return this.LisData.push({
                            name: item.title,
                            value: item.num
                        })
                    })
                    this.functionPie(this.LisData)
                }
            })
        },
    },
}

</script>

<style lang="less" scoped>
.box_problem {
    width: 100%;
    height: 28.4rem !important;
}

.moodal_but {
    width: 5.6rem;
    height: 2.8rem;
    background: url(../../../../assets/images/zhangzi/home/select.png) no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;
    line-height: 2.8rem;
}

.moda_but {
    width: 5.6rem;
    height: 2.8rem;
    background: url(../../../../assets/images/zhangzi/home/unselect.png) no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;
    line-height: 2.8rem;
}

.opacity {
    opacity: 0.6;
}

.Pie_lc {
    width: 40rem;
    height: 24rem;
    margin: 0 auto;
    margin-bottom: 3rem;
}
</style>